<template>
    <div>
        <Row type="flex" justify="center" style="margin: 30px; margin-left: -200px;">
            <i-col span="18">
                <Row  type="flex" justify="center" align="middle" style=" margin-bottom: 30px;" class="code-row-bg" v-for="course in courseList" :key="course.courseId">
                    <i-col span="6" style="margin: 10px;">
                        <img src="https://gxbfile-gs.gaoxiaobang.com/uploads/course_image/link/39a1e2861ef84e8183e9891b979f06d3.png" style="width:100%" ></img>
                    </i-col>
                    <i-col span="13" style="margin-left: 20px; margin-top: -5px;">
                        <h1 style="font-weight: bold; font-size: 24px;">{{course.title}}</h1>
                        <Row>
                            <h6 style="margin-top:10px">课程号: <span>{{course.courseId}}</span> &nbsp; &nbsp; &nbsp; &nbsp; 选课人数：<span>{{course.stuNum}}</span> 人</h6>
                        </Row>
                        <Divider style="margin-top: 10px; margin-bottom: 10px;"/>
                        <div style="font-size: 15px;">
                            <p><span>课程类型：</span><span>{{course.tag}}</span></p>
                            <p><span>课程时间：</span><span>{{course.timeRange}}</span></p>
                            <p><span>主讲老师：</span><span>{{course.teacherName}}</span></p>
                            <p><span>课程描述：</span><span>{{course.description}}</span></p>
                        </div>
                    </i-col>
                    <i-col span="3" style="height: 200px;">
                        <div style="line-height: 50%; position: relative; top: 150px;">
                            <i-button type="success" size="large" style="margin-left: 20px; width: 80%;" @click="toDetail(course.courseId)">教学管理</i-button>
                        </div>
                    </i-col>
                </Row>
            </i-col>
        </Row>
    </div>
</template>
<script>
    import courseApi from '@/api/course'
    import cookie from 'js-cookie'
    import { mapMutations } from 'vuex'
    export default {
        name: 'CourseList',
        data () {
            return {
                courseList: [
                    {
                        title:'青春正当时（大学新生入学教育）',
                        courseId: '000000',
                        stuNum: 100,
                        tag: '专业课',
                        timeRange: '2020-09-06 ~ 2020-09-21',
                        teacherName: '谭火斌',
                        description: '00000000000000000000000000000000000000000000000000000000000000000000000000000000000000'
                    },
                    {
                        title:'青春正当时（大学新生入学教育）',
                        courseId: '000001',
                        stuNum: 100,
                        tag: '专业课',
                        timeRange: '2020-09-06 ~ 2020-09-21',
                        teacherName: '谭火斌',
                        description: '00000000000000000000000000000000000000000000000000000000000000000000000000000000000000'
                    },
                    {
                        title:'青春正当时（大学新生入学教育）',
                        courseId: '000002',
                        stuNum: 100,
                        tag: '专业课',
                        timeRange: '2020-09-06 ~ 2020-09-21',
                        teacherName: '谭火斌',
                        description: '00000000000000000000000000000000000000000000000000000000000000000000000000000000000000'
                    },
                ]
            }
        },
        computed: {
            // courseList() {
            //     return this.$store.state.courseStore.courseList
            // }
        },
        methods: {
            toDetail: function(id){
                console.log('father: ', id)
                this.$router.push(
                    {
                        path:'/manage/manageCourseDetail', 
                        query:{
                            courseId: id
                        }
                })
            }
        },
        created() {
            console.log('CourseList', this.courseList)
            if(cookie.get('isTea') === '1'){
                let teaInfo = JSON.parse(cookie.get('userInfo'))
                courseApi.getCourseByTea().then(response =>{
                    console.log('courseList', response.data)
                })
            }
            else{
                this.$message({
                  type: 'error',
                  message: "非教师帐号"
                })
                this.$router.push({path:'/'})
            }
        },
        

        
    }
</script>